<template>
    <div class="container">
        <div class="box boxT">
            <div class="title">
                <div class="titleLeft">今日预约情况</div>
                <div class="titleRight">更新: {{updateTime}}</div>
            </div>
            <ul class="list">
                <li class="listLi">
                    <div class="listTop">预约就诊</div>
                    <div class="listBom">
                        <div class="listBomLeft">{{appointmentProfile.todayAppointment}}</div>
                        <div class="listBomRight"
                                :class="Number(appointmentProfile.todayAppointmentAdd) > -1 ? 'greenColor' : 'redColor'">
                            {{appointmentProfile.todayAppointmentAdd}}
                        </div>
                    </div>
                </li>
                <li class="listLi">
                    <div class="listTop">到院人数</div>
                    <div class="listBom">
                        <div class="listBomLeft">{{appointmentProfile.todayArrived}}</div>
                        <div class="listBomRight"
                                :class="Number(appointmentProfile.todayArrivedAdd) > -1 ? 'greenColor' : 'redColor'">
                            {{appointmentProfile.todayArrivedAdd}}
                        </div>
                    </div>
                </li>
                <li class="listLi" @click="cancel">
                    <div class="listTop">
                        <span class="listTopText">取消就诊</span>
                        <i class="el-icon-arrow-right listTopIcon"></i>
                    </div>
                    <div class="listBom">
                        <div class="listBomLeft">{{appointmentProfile.todayAppointmentCanceled}}</div>
                        <div class="listBomRight"
                                :class="Number(appointmentProfile.todayAppointmentCanceledAdd) > -1 ? 'greenColor' : 'redColor'">
                            {{appointmentProfile.todayAppointmentCanceledAdd}}
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 柱状图 -->
        <div class="box">
            <div class="title">
                <div class="titleLeft">科室挂号情况</div>
                <div class="titleRight">总数: {{sum}}</div>
            </div>
            <div>
                <div id="main" style="height: 30vh; width: 95vw;" ref="barchartT"></div>
            </div>
        </div>
        <!-- 饼状图 -->
        <div class="box">
            <div class="title">
                <div class="titleLeft">分控码分布</div>
                <div class="titleRight"></div>
            </div>
            <div>
                <div id="mainPie" style="height: 60vw;" ref="piechart"></div>
            </div>
        </div>
        <!-- 柱状图 -->
        <div class="box">
            <div class="title">
                <div class="titleLeft">
                    <span>健康打卡分析</span>
                    <span class="day">近14天</span>
                </div>
                <div class="titleRight">
                    <!-- <group>
                        <datetime v-model="timeValue"></datetime>
                    </group> -->
                </div>
            </div>
            <div>
                <div id="main" style="height: 30vh" ref="barchartB"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import { Datetime, Group } from 'vux'
    
    export default {
        data() {
            return {
                chartList: {
                    barchartT: null,
                    piechart: null,
                    barchartB: null
                },
                updateTime: '',
                appointmentProfile: {
                    todayAppointment: '',
                    todayAppointmentAdd: '',
                    todayArrived: '',
                    todayArrivedAdd: '',
                    todayAppointmentCanceled: '',
                    todayAppointmentCanceledAdd: ''
                },
                healthCode: {
                    red: {
                        value: '',
                        name: ''
                    },
                    yellow: {
                        value: '',
                        name: ''
                    },
                    green: {
                        value: '',
                        name: ''
                    }
                },
                deptData: [],
                deptNum: [],
                sum: '',
                clockInData: [],
                clockInNum: [],
                timeValue: this.$filter.timeFormat(new Date(), 'YYYY-MM-DD')
            }
        },
        mounted() {
            this.getData()
            let _this = this
            window.addEventListener('resize', function () {
                _this.chartList.barchartT.resize()
                _this.chartList.piechart.resize()
                _this.chartList.barchartB.resize()
            })
        },
        methods: {
            getData() {
                this.$http.get('/cockpit/data').then(result => {
                    if (result.success) {
                        this.updateTime = result.data.updateTime
                        this.appointmentProfile = {
                            todayAppointment: result.data.appointmentProfile.todayAppointment,
                            todayAppointmentAdd: result.data.appointmentProfile.todayAppointmentAdd,
                            todayArrived: result.data.appointmentProfile.todayArrived,
                            todayArrivedAdd: result.data.appointmentProfile.todayArrivedAdd,
                            todayAppointmentCanceled: result.data.appointmentProfile.todayAppointmentCanceled,
                            todayAppointmentCanceledAdd: result.data.appointmentProfile.todayAppointmentCanceledAdd
                        }

                        for (let i = 0; i < result.data.deptAppointment.data.length; i++) {
                            this.deptData.push(result.data.deptAppointment.data[i].deptName)
                            this.deptNum.push(result.data.deptAppointment.data[i].cnt)
                        }
                        this.sum = result.data.deptAppointment.sum

                        this.healthCode.red.value = result.data.healthCode.data[1].num
                        this.healthCode.red.name = result.data.healthCode.data[1].hcode
                        this.healthCode.yellow.value = result.data.healthCode.data[2].num
                        this.healthCode.yellow.name = result.data.healthCode.data[2].hcode
                        this.healthCode.green.value = result.data.healthCode.data[0].num
                        this.healthCode.green.name = result.data.healthCode.data[0].hcode

                        for (let i = 0; i < result.data.clockIn.data.length; i++) {
                            this.clockInData.push(result.data.clockIn.data[i].date)
                            this.clockInNum.push(result.data.clockIn.data[i].cnt)
                        }
                        this.deptRegt()
                        this.hospitalNum()
                        this.clock()
                    }
                })
            },
            deptRegt() {
                this.chartList.barchartT = this.$echarts.init(this.$refs.barchartT)
                // this.chartList.barchartT = this.$echarts.init(document.getElementById('main'))
                let option = {
                        title: {
                            text: ''
                        },
                        tooltip: {},
                        legend: {
                            data: ['销量']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '8%',
                            containLabel: true
                        },
                        xAxis: {
                            data: this.deptData,
                            axisLabel: {
                                show: true,
                                rotate: 30,
                                interval: 0,
                                textStyle: {
                                    color: '#999' // 更改坐标轴文字颜色
                                },
                                axisTick: {
                                    show: false
                                },
                                lineStyle: {
                                    color: '#999' // 更改坐标轴颜色
                                },
                                formatter: function(params) {
                                    let newStr = '', n = params.length, a = 3
                                    if (n > a) {
                                        newStr = params.slice(0, 3) + '...'
                                    } else {
                                        newStr = params
                                    }
                                    return newStr
                                }
                            }
                        },
                        yAxis: {
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#999' // 更改坐标轴文字颜色
                                },
                                lineStyle: {
                                    color: '#999' // 更改坐标轴颜色
                                }
                            }
                        },
                        dataZoom: [{
                            type: 'slider',
                            height: 15,
                            show: true,
                            bottom: 0,
                            handleSize: 0,
                            realtime: true,
                            start: 0,
                            end: 40
                        }],
                        series: [{
                            name: '',
                            type: 'bar',
                            data: this.deptNum,
                            barWidth: 20,
                            itemStyle: {
                                normal: {
                                    color: '#73A0FA'
                                }
                            }
                        }]
                    }
                this.chartList.barchartT.setOption(option)
            },
            hospitalNum() {
                this.chartList.piechart = this.$echarts.init(this.$refs.piechart)
                let _this = this,
                option = {
                    title: {
                        text: '总体情况',
                        textAlign: 'left'
                    },
                    tooltip: {},
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        y: 'center',
                        data: ['红码', '黄码', '绿码'],
                        align: 'left',
                        formatter: function (name) {
                            if (name === '红码') {
                                return name + ' ' + _this.healthCode.red.value
                            } else if (name === '黄码') {
                                return name + ' ' + _this.healthCode.yellow.value
                            } else if (name === '绿码') {
                                return name + ' ' + _this.healthCode.green.value
                            }
                        }
                    },
                    series: [{
                        name: '',
                        type: 'pie',
                        center: ['60%', '50%'],
                        radius: '70%',
                        data: [
                            {value: this.healthCode.red.value, name: '红码'},
                            {value: this.healthCode.yellow.value, name: '黄码'},
                            {value: this.healthCode.green.value, name: '绿码'}
                        ],
                        label: {
                            show: false
                        },
                        minAngle: 15
                    }],
                    color: ['#FB4D52', '#F8FD73', '#47CF61']
                }
                this.chartList.piechart.setOption(option)
            },
            clock() {
                this.chartList.barchartB = this.$echarts.init(this.$refs.barchartB)
                // this.chartList.barchartB = this.$echarts.init(document.getElementById('main'))
                let option = {
                        title: {
                            text: ''
                        },
                        tooltip: {},
                        legend: {
                            data: ['销量']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '14%',
                            containLabel: true
                        },
                        xAxis: {
                            data: this.clockInData,
                            axisLabel: {
                                show: true,
                                rotate: 30,
                                interval: 0,
                                textStyle: {
                                    fontSize: 10,
                                    color: '#999' // 更改坐标轴文字颜色
                                },
                                axisTick: {
                                    show: false
                                },
                                lineStyle: {
                                    color: '#999' // 更改坐标轴颜色
                                },
                                formatter: function(params) {
                                    let newStr = ''
                                    newStr = params.slice(4, 8)
                                    return newStr
                                }
                            }
                        },
                        yAxis: {
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#999' // 更改坐标轴文字颜色
                                },
                                lineStyle: {
                                    color: '#999' // 更改坐标轴颜色
                                }
                            }
                        },
                        dataZoom: [{
                            type: 'slider',
                            height: 15,
                            show: true,
                            bottom: 10,
                            handleSize: 0,
                            realtime: true,
                            start: 0,
                            end: 40
                        }],
                        series: [{
                            name: '',
                            type: 'bar',
                            data: this.clockInNum,
                            barWidth: 20,
                            itemStyle: {
                                normal: {
                                    color: '#73A0FA'
                                }
                            }
                        }]
                    }
                this.chartList.barchartB.setOption(option)
            },
            cancel() {
                this.$router.push('/cockpitRegCancel')
            }
        },
        components: {
            Datetime,
            Group
        }
    }
</script>

<style scoped lang="less">
    .container {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f4f4f4;
        .box {
            padding: .2rem .2rem 0;
            margin-bottom: .2rem;
            padding-bottom: .4rem;
            background-color: #fff;
            &:last-child {
                margin-bottom: 0;
            }
            .title {
                width: 100%;
                height: .6rem;
                line-height: .6rem;
                .titleLeft {
                    position: relative;
                    float: left;
                    padding-left: .2rem;
                    font-size: .32rem;
                    &::after {
                        content: '';
                        position: absolute;
                        left: 0;
                        top: .125rem;
                        width: .08rem;
                        height: .3rem;
                        background-color: #419BF9;
                    }
                    .day {
                        color: #999;
                        font-size: .24rem;
                    }
                }
                .titleRight {
                    float: right;
                    color: #999;

                    /deep/ .weui-cells {
                        margin-top: 0;
                        &::after {
                            content: '';
                            border: none;
                        }
                        &::before {
                            content: '';
                            border: none;
                        }
                        .weui-cell_access {
                            height: .4rem;
                            margin-top: .1rem;
                            padding: 0 .2rem;
                            border: .02rem solid #1B82D1;
                            line-height: .4rem;
                            border-radius: .4rem;
                            .weui-cell__ft {
                                &::after {
                                    content: '';
                                    border-color: #222;
                                    margin-top: -.04rem;
                                }
                            }
                            .vux-cell-value {
                                color: #222;
                                font-size: .24rem;
                            }
                        }
                    }
                }
            }
            .list {
                display: flex;
                width: 100%;
                // height: 1.4rem;
                margin-top: .2rem;
                .listLi {
                    flex: 1;
                    margin: 0 .1rem;
                    padding: .15rem .2rem;
                    box-shadow: 0 0 .1rem #ccc;
                    border-radius: .04rem;
                    .listTop {
                        position: relative;
                        color: #999;
                        font-size: .24rem;
                        .listTopIcon {
                            position: absolute;
                            top: .06rem;
                            right: -.1rem;
                            width: .25rem;
                            height: .25rem;
                            line-height: .25rem;
                            text-align: center;
                            background-color: #ccc;
                            color: #fff;
                            font-size: .24rem;
                            border-radius: 50%;
                        }
                    }
                    .listBom {
                        position: relative;
                        width: 100%;
                        height: .4rem;
                        margin-top: .1rem;
                        .listBomLeft {
                            float: left;
                            font-size: .48rem;
                            line-height: .4rem;
                        }
                        .listBomRight {
                            position: absolute;
                            right: 0;
                            bottom: 0;
                            min-width: .5rem;
                            padding: .03rem .1rem;
                            // height: .3rem;
                            line-height: .24rem;
                            color: #fff;
                            text-align: center;
                            font-size: .24rem;
                        }
                        .redColor {
                            background-color: #FF6767;
                        }
                        .greenColor {
                            background-color: #00C649;
                        }
                    }
                }
            }
        }
        .boxT {
            padding-bottom: .4rem;
        }
    }
</style>
